<template>
    <!-- 三级列表 -->
    <Category :disables="isShowList === 1 || isShowList === 2"/>

    <!-- 条件渲染不同的组件 -->
    <el-card shadow="always" :body-style="{ padding: '20px' }" :style="{ marginTop: '40px' }">
        <SpuList v-if="isShowList === 0" @setState="setState" />
        <SpuFrom v-if="isShowList === 1" @setState="setState" :spuInfo="newSpuList" />
        <SkuFrom v-if="isShowList === 2" @setState="setState" :spuInfo="newSpuList" />
    </el-card>

</template>

<script lang="ts">
import { defineComponent } from "vue";
//引入子组件
import SpuList from "./components/SpuList/index.vue"
import SpuFrom from "./components/SpuFrom/index.vue"
import SkuFrom from "./components/SkuFrom/index.vue"
import type { supInfoType } from "@/api/spu";
import { storeToRefs } from "pinia";
export default defineComponent({
    name: "Spu",
});
</script>

<script setup lang="ts">
import { ref } from "vue"
import useAttrStore from "@/stores/attr";

const attrStore = useAttrStore()
const { category3Id } = storeToRefs(attrStore)

//1.定义数据控制显示不同的组件
const isShowList = ref(0)

//定义要添加的spu
const newSpuList = ref<supInfoType>({
    category3Id: category3Id.value as number,
    description: "",
    tmId: null,
    spuName: "",
    spuImageList: null,
    spuSaleAttrList: null,
})

//2.给子组件绑定自定义事件，切换不同的组件
const setState = (state: number, row?: supInfoType) => {
    //切换组件
    isShowList.value = state
    //判断是添加还是修改
    if (row) {
        //修改就数据回填
        newSpuList.value = row
    } else {
        //添加就清空
        newSpuList.value = {
            category3Id: category3Id.value as number,
            description: "",
            tmId: null,
            spuName: "",
            spuImageList: null,
            spuSaleAttrList: null,
        }
    }
}
</script>